<template>
  <div class="cesium-draw">
    <div id="cesium-drawer"></div>
    <!-- <div class="mouse-postion">{{ nowPostion.wgs84 }}</div> -->
    <div class="tool-box">
      <!-- <div class="slider-box-wrapper"><slider-box v-model:value="terrainExaggeration" :max="2" /></div> -->
      <div class="slider-box-wrapper"><slider-box v-model:value="height" :max="1000" :min="-1000" :step="1" /></div>
      <!-- <div class="select-box-wrapper"><select-box :options="layerOptions" /></div> -->
      <!-- <div class="select-box-wrapper"><select-box :options="entityToolbarOptions" /></div>
          <div class="select-box-wrapper"><select-box :options="sizeOptions" /></div>
          <div class="select-box-wrapper"><a-checkbox v-model:checked="shadows">shadows</a-checkbox></div>
          <div class="select-box-wrapper"><a-checkbox v-model:checked="softShadows">soft shadows</a-checkbox></div>
          <div class="select-box-wrapper"><a-checkbox v-model:checked="terrainShadows">terrain shadows</a-checkbox></div> -->
      <!-- <div class="select-box-wrapper"><a-checkbox v-model:checked="picking">选择</a-checkbox></div> -->
    </div>
  </div>
</template>

<script>
import * as Cesium from '@cesiumjs';
import { DownOutlined, EditOutlined } from '@ant-design/icons-vue';
import { defineComponent, ref, watch } from 'vue';
// import MousePosition from '@functional/utils/mousePosition';
import sliderBox from '@components/widgets/slider-box';
import { G3V } from '@g3x';
import {viewerMixin} from '@mixins';
// import merge from '@g3x/utils/merge';

export default defineComponent({
  name: '3dtiles', // 3d tiles
  mixins: [viewerMixin],
  components: { DownOutlined, EditOutlined, sliderBox },
  setup() {
    return {
      viewer: null,
      synchronizer: null,
      isRepeating: true,
      videoOverlay: true
    };
  },
  data() {
    return {
      height: 0,
      setHeight: () => {},
      nowPostion: {}
    };
  },
  computed: {},
  watch: {
    height(val) {
      this.setHeight(val);
    }
  },
  beforeUnmount() {},
  methods: {
    g3vOptionsGet(original) {
      return original;
    },
    onViewerInited() {
      console.log('gdp onViewerInited');
    },
    initEffects() {
      let vm = this;
      const viewer = this.viewer;

      // var tileset = new Cesium.Cesium3DTileset({
      //   url: '//zzgis.com/cdn/3d/3dtiles/mapbox_3dtiles_samples/animations/tileset.json',
      //   url: '//zzgis.com/cdn/3d/3dtiles/mapbox_3dtiles_samples/b3dm/tileset.json',
      //   url: '//zzgis.com/cdn/3d/3dtiles/mapbox_3dtiles_samples/composite/tileset.json',
      //   url: '//zzgis.com/cdn/3d/3dtiles/stadium_all/tileset.json',
      //   url: '//zzgis.com/cdn/3d/3dtiles/AzrieliTLV/tileset.json',
      //   // url: '//zzgis.com/cdn/3d/3dtiles/msl-dingo-gap/0528_0260184_to_s64o256/0528_0260184_to_s64o256/0528_0260184_to_s64o256_tileset.json',
      //   url: '//zzgis.com/cdn/3d/3dtiles/AzrieliTLV/tileset.json',
      //   url: '//zzgis.com/cdn/3d/3dtiles/taichung/tileset.taichung.json',
      //   url: '//zzgis.com/cdn/3d/3dtiles/40866/tileset.json',
      // });

      // tileset.readyPromise
      //   .then(function(tileset) {
      //     viewer.scene.primitives.add(tileset);
      //     viewer.zoomTo(tileset, new Cesium.HeadingPitchRange(0.0, -0.5, tileset.boundingSphere.radius * 2.0));
      //   })
      //   .otherwise(function(error) {
      //     console.error(error);
      //   });

      // vm.setHeight = function(height) {
      //   height = Number(height);
      //   if (isNaN(height)) {
      //     return;
      //   }
      //   var cartographic = Cesium.Cartographic.fromCartesian(tileset.boundingSphere.center);
      //   var surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 0.0);
      //   var offset = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, height);
      //   var translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3());
      //   tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
      // };
    },
  }
});
</script>

<style scoped lang="less">
.cesium-draw {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  color: white;
  font-size: 14px;

  #cesium-drawer {
    width: 100%;
    height: 100%;
    overflow: hidden;
    :deep(.cesium-viewer-bottom) {
      display: none !important;
    }
  }

  .mouse-postion {
    position: absolute;
    bottom: 10px;
    right: 10px;
    font-size: 14px;
    padding: 8px 12px;
    line-height: 16px;
    color: white;
    z-index: 9999;
    background-color: rgba(40, 48, 60, 1);
    border-radius: 3px;
    opacity: 0.8;
  }
}

.tool-box {
  position: absolute;
  top: 70px;
  left: 10px;
  z-index: 9;

  #menu {
    padding-top: 20px;
    button {
      background-color: rgba(0, 0, 0, 0.75);
      border-color: rgba(0, 0, 0, 0);
      cursor: pointer;
      transition: all 500ms;
      &:hover {
        opacity: 0.75;
      }
    }
  }

  .slider-box-wrapper {
    width: 18em;
    padding: 0 10px;
    background-color: rgba(0, 0, 0, 0.75);
    margin-bottom: 10px;
  }

  .select-box-wrapper {
    padding: 5px 15px;
    background-color: rgba(0, 0, 0, 0.75);
    margin-bottom: 10px;
    width: auto;
  }
}
</style>
